<template>
    <transition
        name="slide"
        mode="out-in"
    >
        <div id="article-detail">
            <div class="detail-content">
                <div class="article-info">
                    <div
                        class="title"
                        v-text="articleInfo.title"
                    >
                    </div>
                    <div class="timer">
                        <img
                            src="~assets/images/date.png"
                            alt=""
                        >
                        <span v-text="articleInfo.date"></span>
                    </div>
                    <div class="brief-introduction">
                        <span>简介</span>
                        <span v-text="articleInfo.synopsis"></span>
                    </div>
                    <div
                        class="article-content"
                        v-html="articleInfo.content"
                    ></div>
                    <div class="center like">
                        <div
                            class="center pointer"
                            @click="likes"
                        >
                            <span>很赞哦!</span>
                            <span>({{ articleInfo.likes }})</span>
                        </div>
                    </div>
                </div>
                <Comment
                    :article-id="articleId"
                    :article-title="articleInfo.title"
                ></Comment>
            </div>
        </div>
    </transition>
</template>

<script>
    import Comment from './Comment';
    import { getArticleDetail, articlesLikes } from 'assets/js/api';
    export default {
        components: {
            Comment
        },
        data () {
            return {
                articleId: '',
                articleInfo: {}
            };
        },
        created () {
            this.articleId = this.$route.query.articleId;
        },
        mounted () {
            this.getArticleDetail();
        },
        methods: {
            likes () {
                articlesLikes({
                    articleId: this.articleId
                }).then(res => {
                    if (!res.status) {
                        this.$Message.info(res.msg);
                        return;
                    }
                    this.$Message.success(res.msg);
                    this.getArticleDetail(true);
                });
            },
            /**
             * 获取文件详情
             */
            getArticleDetail (isLikes = false) {
                let paramsJson = {
                    articleId: this.articleId
                };
                if (isLikes) {
                    paramsJson.likes = true;
                }
                getArticleDetail(paramsJson).then(res => {
                    this.articleInfo = res.data;
                });
            }

        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/variable';
.slide-enter-active,
.slide-leave-active {
    transition: all 0.2s;
}
.slide-enter,
.slide-leave-to {
    transform: translate3d(30%, 0, 0);
    opacity: 0;
}
#article-detail {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: @color-background;
    .detail-content{
        width: 90%;
        margin: 0 auto;
        padding-bottom: 20px;
        .article-info {
            border-radius: 10px;
            margin-top: 20px;
            padding: 20px;
            background-color: @color-content-background;
            .title{
                line-height: 40px;
                font-size: @font-size-large-x;
                font-weight: bold;
            }
            .timer{
                display: flex;
                align-items: center;
                height: 40px;
                color: @color-text-g;
                font-size: @font-size-medium;
                img{
                    margin-right: 10px;
                }
            }
            .brief-introduction {
                display: flex;
                padding: 10px;
                background-color: #F6F6F6;
                font-size: @font-size-medium;
                line-height: 23px;
                margin-bottom: 30px;
                span:first-child{
                    width: 40px;
                    flex-shrink: 0;
                }
                span:last-child{
                    flex-grow: 1;
                    color: @color-text-g;
                }
            }
            .article-content{
                line-height: 24px;
            }
            .like{
                margin-top: 20px;
                div {
                    width: 160px;
                    background: #E2523A;
                    color: @color-text-main;
                    border-radius: 3px;
                    line-height: 40px;
                    span:last-child{
                        margin-left: 10px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
</style>
